<template>
  <div class="monitor-center w100 h100">
    <vue-scroll>
      <div class="monitor-head">
        <div class="head-left">{{platformCn}}</div>
        <div class="head-right">
          <div class="user">{{user ? user.loginName : ''}}</div>
          <div class="back" @click="backTo">登出</div>
        </div>
      </div>
      <div class="monitor-content">
        <content-head @update="headUpdate"></content-head>
        <content-body :radio-data="onOffline"></content-body>
      </div>
    </vue-scroll>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import ContentHead from './ContentHead'
  import ContentBody from './Contentbody'
  import Config from '../../config'
  export default {
    name: 'MonitorCenter',
    components: {
      ContentHead,
      ContentBody
    },
    data () {
      return {
        onOffline: {
          online: 0,
          offline: 0
        },
        platformCn: Config.PLATFORM_CN
      }
    },
    computed: {
      ...mapGetters('user', {
        user: 'getUser'
      })
    },
    methods: {
      /**
       * 返回上级目录
       * */
      backTo () {
        this.$router.go(-1)
      },
      headUpdate (obj) {
        this.$set(this.onOffline, 'online', obj.online)
        this.$set(this.onOffline, 'offline', obj.offline)
      }
    }
  }
</script>

<style lang="scss">
  .monitor-center {
    .monitor-head {
      height: 50px;
      color: $white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 24px;
      background-color: #142A6F;
      .head-left {
        font-size: 20px;
      }
      .head-right {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .user { }
        .back {
          margin-left: 32px;
          cursor: pointer;
        }
      }
    }
    .monitor-content {
      background: url("../../../static/image/monitor-center/monitor-bg.png") 100% no-repeat;
      padding: 25px 28px 28px 32px;
      .common-container {
        box-sizing: border-box;
        border: 2px solid #11478c;
        box-shadow: #0e458a 0px 0px 16px inset;
      }
    }
  }
</style>
